<template>
  <div class="markdown-container" v-html="renderedMarkdown"></div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import MarkdownIt from 'markdown-it'
import iterator from 'markdown-it-for-inline'

const text = ref(`
Here is a footnote reference,[^1] and another.[^longnote]belong to the previous footnote.<sup>[11]</sup>
`)

console.log(MarkdownIt)

const md = new MarkdownIt().use(iterator, 'rag_source', 'text', function (tokens, idx) {
  tokens[idx].content = tokens[idx].content.replace(/\[\^([^\]]+)\]/g, '<sup>$1</sup>')
})

md.renderer.rules.text = (tokens, idx, options, env, self) => {
  return md.renderer.renderInlineAsText(tokens, idx, options, env, self)
}

console.log(md.render(text.value))

// 使用 computed 计算属性来生成渲染后的 HTML
const renderedMarkdown = computed(() => md.render(text.value))
</script>

<style scoped>
.markdown-container {
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>
